<template>
  <view>
    <view v-if="isNotice == 'N'" class="notice-pop">
      <view class="notice-pop-content">
        <view class="title">关于个人信息登记声明</view>
        <view style="height: 22upx"></view>
        <view class="detail"
          >登记您的称呼、手机号码，仅用于为您提供服务时的联络。公司承诺对您登记的信息进行保密，不会用于其他用途。</view
        >
        <view style="flex: 1"></view>
        <button size="mini" type="primary" @click="agree">
          我已知晓，同意采集
        </button>
        <view style="height: 30upx"></view>
        <button size="mini" @click="disagree">拒绝采集，放弃服务</button>
        <view style="height: 10upx"></view>
      </view>
    </view>

    <page-head title="form"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <form @submit="formSubmit" @reset="formReset">
        <view class="uni-form-item uni-column-b">
          <view class="title" style="padding: 0 0 10upx 0">问题描述</view>
          <textarea
            auto-height
            class="uni-textarea"
            name="Ask"
            v-model="Ask"
            placeholder="请输入需要解决的问题"
          />
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">您的称呼</view>
          <input
            class="uni-input"
            name="Sender"
            v-model="Sender"
            placeholder="请输入与您联系的称呼"
          />
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">联系电话</view>
          <input
            class="uni-input"
            name="Phone"
            v-model="Phone"
            placeholder="请输入您的联系电话"
          />
        </view>

        <view class="uni-form-item uni-column">
          <view class="title">向日葵识别码</view>
          <input
            v-model="RemoteAccount"
            class="uni-input"
            name="RemoteAccount"
            placeholder="识别码"
          />
        </view>

        <view class="uni-form-item uni-column">
          <view class="title">向日葵验证码</view>
          <input
            v-model="RemoteAuth"
            class="uni-input"
            name="RemoteAuth"
            placeholder="验证码"
          />
        </view>

        <view class="uni-btn-v">
          <button type="primary" form-type="submit">确认提交</button>
        </view>
      </form>
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      IsdependRemote: "N",
      aid: "",
      Ask: "",
      Sender: "",
      Phone: "",
      RemoteAccount: "",
      RemoteAuth: "",
    };
  },
  onLoad() {
    const lastSubmit = uni.getStorageSync("lastSubmit")
    if (lastSubmit){
      this.Sender = lastSubmit["Sender"];
      this.Phone = lastSubmit["Phone"];
      this.RemoteAccount = lastSubmit["RemoteAccount"];
      this.RemoteAuth = lastSubmit["RemoteAuth"];
    }else{
      this.Sender = this.currentAsk["Sender"];
      this.Phone = this.currentAsk["Phone"];
      this.RemoteAccount = this.currentAsk["RemoteAccount"];
      this.RemoteAuth = this.currentAsk["RemoteAuth"];
    }
    this.aid = this.currentAsk["aid"];
    this.Ask = this.currentAsk["Ask"];

  },
  computed: {
    ...mapState(["openid", "isNotice", "currentAsk"]),
  },
  methods: {
    ...mapMutations(["updateIsNotice"]),
    agree() {
      this.updateIsNotice("Y");
    },
    disagree() {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
    async formSubmit(e) {
      let items = e.detail.value;
      console.log("准备提交", e.detail.value);
      if (items["Ask"] == "") return this.$alert("请填写问题描述");
      if (items["Sender"] == "") return this.$alert("请填写您的称呼");
      if (items["Phone"] == "") return this.$alert("请填写您的联系电话");

      let data = { ...items, openid: this.openid, aid: this.aid };
      try {
        let res = await this.$request("Service/UpdateAsk", data, "post");
        if (res.data.data == "ok") {
          await this.$confirmOnly("成功提交");
          uni.setStorageSync("lastSubmit", items);
          uni.redirectTo({
            url: "/pages/index/index",
          });
        }
      } catch (e) {
        this.$alert("提交问题描述失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.notice-pop {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-content: center;
}
.notice-pop-content {
  display: flex;
  flex-direction: column;
  padding: 20upx 26upx;
  margin-top: 200upx;
  width: 680upx;
  background: #fff;
  border-radius: 20upx;
  height: 440upx;
  .title {
    text-align: center;
    color: #333;
    font-size: 38upx;
  }
  .detail {
    color: #777;
    letter-spacing: 2upx;
    line-height: 50upx;
    font-size: 34upx;
  }
}
.uni-form-item .title {
  padding: 0 20upx 0 0;
}
.uni-padding-wrap {
  /* width:690rpx; */
  padding: 0 30rpx;
}
.uni-common-mt {
  margin-top: 30rpx;
}
.uni-column {
  /* flex-direction: column; */
  align-items: center;
}
.uni-column-b {
  flex-direction: column;
  /* align-items: center; */
}
.uni-input {
  height: 50rpx;
  padding: 15rpx 25rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  background: #fff;
  flex: 1;
}
.uni-textarea {
  /* height: 50rpx; */
  padding: 25rpx 25rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  width: 93%;
  background: #fff;
  /* flex: 1; */
}
.uni-form-item {
  display: flex;
  width: 100%;
  padding: 10rpx 0;
}
.uni-btn-v {
  padding: 10rpx 0;
}
.uni-btn-v button {
  margin: 20rpx 0;
}
</style>
